<template>
	<view>
		<view class="items">
			<view class="item">
				<view class="item-xs">推荐</view>
				<view class="item-x">千里眼</view>
				<view class="item-x">搞笑</view>
				<view class="item-x">娱乐</view>
				<view class="item-x">社会</view>
				<view class="item-x">音乐</view>
				<view class="item-x">科技</view>
			</view>
		</view>
		<view class="item-ss"></view>
		<view class="sp">
			<navigator url="../videocontent/videocontent">
				<view class="x">600斤的公牛不甘心被杀，宁愿跳入大海之中，结局令人遗憾</view>
			</navigator>
			<video class="y" style="width: 100%;height: 400rpx;"
				src="http://picture.518-money.cn/18f875c85487a46140e71b6672b98c77c6f79a6e.mp4"></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image style="width: 45rpx;height: 45rpx;" src="../../../static/a.jpg"></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">开心哈哈大笑...</view>
					<view class="wenzizf" style="color:#999999; margin-top: 0rpx;">|</view>
					<view class="wenzizf" style="font-size: 20rpx; color:#dd524d; font-weight: bold;">关注</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../../static/xingxi.png"></image>
					</view>
					<view class="tupiandx">
						<image style="width: 35rpx;height: 35rpx;" src="../../../static/dianzan.png"></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...	</view>
				</view>
			</view>
		</view>
		<view class="sp">
			<navigator url="../videocontent/videocontent">
					<view class="x">这些箱子里装的中高档卷烟共有1350余条，27万余之</view>
				</navigator>
				<video class="y" style="width: 100%;height: 400rpx;"
					src="http://picture.518-money.cn/18f875c85487a46140e71b6672b98c77c6f79a6e.mp4"></video>
				<view class="dibu">
					<view class="wenzi">
						<view class="wenzizf">
							<image style="width: 45rpx;height: 45rpx;" src="../../../static/b.jpg"></image>
						</view>
						<view class="wenzizf" style="font-size: 32rpx;">往事随风飘去...</view>
						<view class="wenzizf" style="color:#999999; margin-top: 0rpx;">|</view>
						<view class="wenzizf" style="font-size: 20rpx; color:#dd524d; font-weight: bold;">关注</view>
					</view>
					<view class="tupian">
						<view class="tupiandx">
							<image style="width: 35rpx;height: 35rpx;" src="../../../static/xingxi.png"></image>
						</view>
						<view class="tupiandx">
							<image style="width: 35rpx;height: 35rpx;" src="../../../static/dianzan.png"></image>
						</view>
						<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...	</view>
					</view>
				</view>
			</view>
			<view class="sp">
			<navigator url="../videocontent/videocontent">
					<view class="x">一个"背包客",从郑州坐火车往返江南某市...</view>
				</navigator>
				<video class="y" style="width: 100%;height: 400rpx;"
					src="http://picture.518-money.cn/18f875c85487a46140e71b6672b98c77c6f79a6e.mp4"></video>
				<view class="dibu">
					<view class="wenzi">
						<view class="wenzizf">
							<image style="width: 45rpx;height: 45rpx;" src="../../../static/c.jpg"></image>
						</view>
						<view class="wenzizf" style="font-size: 32rpx;">微笑面对一切...</view>
						<view class="wenzizf" style="color:#999999; margin-top: 0rpx;">|</view>
						<view class="wenzizf" style="font-size: 20rpx; color:#dd524d; font-weight: bold;">关注</view>
					</view>
					<view class="tupian">
						<view class="tupiandx">
							<image style="width: 35rpx;height: 35rpx;" src="../../../static/xingxi.png"></image>
						</view>
						<view class="tupiandx">
							<image style="width: 35rpx;height: 35rpx;" src="../../../static/dianzan.png"></image>
						</view>
						<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...	</view>
					</view>
				</view>
			</view>
			<view class="sp">
			<navigator url="../videocontent/videocontent">
					<view class="x">原来，4月24日，该局执法人员奔赴江南某市，在江南某市火车站</view>
				</navigator>
				<video class="y" style="width: 100%;height: 400rpx;"
					src="http://picture.518-money.cn/18f875c85487a46140e71b6672b98c77c6f79a6e.mp4"></video>
				<view class="dibu">
					<view class="wenzi">
						<view class="wenzizf">
							<image style="width: 45rpx;height: 45rpx;" src="../../../static/d.jpg"></image>
						</view>
						<view class="wenzizf" style="font-size: 32rpx;">每天开开心心...</view>
						<view class="wenzizf" style="color:#999999; margin-top: 0rpx;">|</view>
						<view class="wenzizf" style="font-size: 20rpx; color:#dd524d; font-weight: bold;">关注</view>
					</view>
					<view class="tupian">
						<view class="tupiandx">
							<image style="width: 35rpx;height: 35rpx;" src="../../../static/xingxi.png"></image>
						</view>
						<view class="tupiandx">
							<image style="width: 35rpx;height: 35rpx;" src="../../../static/dianzan.png"></image>
						</view>
						<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...	</view>
					</view>
				</view>
			</view>
			<view class="sp">
			<navigator url="../videocontent/videocontent">
					<view class="x">新郑市烟草与公安部门顺藤摸瓜，连夜驱车奔赴江南某市</view>
				</navigator>
				<video class="y" style="width: 100%;height: 400rpx;"
					src="http://picture.518-money.cn/18f875c85487a46140e71b6672b98c77c6f79a6e.mp4"></video>
				<view class="dibu">
					<view class="wenzi">
						<view class="wenzizf">
							<image style="width: 45rpx;height: 45rpx;" src="../../../static/h.jpg"></image>
						</view>
						<view class="wenzizf" style="font-size: 32rpx;">一起来玩耍吧...</view>
						<view class="wenzizf" style="color:#999999; margin-top: 0rpx;">|</view>
						<view class="wenzizf" style="font-size: 20rpx; color:#dd524d; font-weight: bold;">关注</view>
					</view>
					<view class="tupian">
						<view class="tupiandx">
							<image style="width: 35rpx;height: 35rpx;" src="../../../static/xingxi.png"></image>
						</view>
						<view class="tupiandx">
							<image style="width: 35rpx;height: 35rpx;" src="../../../static/dianzan.png"></image>
						</view>
						<view class="tupiandx" style="margin-top: -10rpx;padding-right: 20rpx;">...	</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
</script>

<style>
	.items{
		background-color: #ffffff;
		position: fixed;
		z-index: 1;
		width: 100%;
		top: 90rpx;
	}
	.item{
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		margin: 5rpx 10rpx 20rpx 10rpx;
		font-size: 40rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}
	.item-ss{
		width: 100%;
		height: 60rpx;
	}
	.tab_title view{
		display: inline-block;
		margin-left: 30rpx;
		line-height: 30rpx;
		color: #ffffff;
	}
	.dibu{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		-webkit-justify-content:space-between;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}
	.wenzi{
		display: flex;
		flex-direction: row;
	}
	.tupian{
		display: flex;
		flex-direction: row;
	}
	.tupiandx{
		margin-left: 60rpx;
	}
	.wenzizf{
		margin-right: 20rpx;
	}
	.x{
		margin-top: 30rpx;
		margin-bottom:30rpx;
	}
	.item-xs{
		color: #dd524d;
		font-weight: bold;
	}
	.a{
		margin-right: 120rpx;
		height: 50rpx;
	}
	.ap image{
		width: 250rpx;
		height: 50rpx;
	}
	.ap{
		border-radius: 10rpx;
		width: 250rpx;
		height: 100rpx;
		overflow: hidden;
		margin: auto;
	}
	.b{}
	.scroll_x{
		height: 50rpx;
		width: 100%;
		white-space: nowrap;
	}
	.item{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #333333;
		background-color: #ffffff;
		border-bottom: 1rpx solid #c8c7cc;
	}
	.tab_title{
		display: inline-block;
		margin-left: 10rpx;
		height: 80rpx;
		line-height: 70rpx;
		color: #333333;
		background-color: #ffffff;
		border-bottom: 1rpx solid #c8c7cc;
	}
	.tab-x{
		color: #333333;
		background-color: #ffffff;
	}
	.scroll_x{
		height: 60rpx;
		width: 100%;
		white-space: nowrap;
	}
	.gray{
		color: #c8c7cc;
	}
	.gray1{
		color: #dd524d;
	}
	.hd{
		display: inline-block;
	}
	.tab{
		background-color: #dd524d;
	}
	.shgd{
		position: fixed;
		position: absolute;
		z-index: 1;
	}
	scroll-view::-webkit-scrollbar{
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
	.sp{
		border-bottom: 1rpx solid #e5eaf3;
		margin: 10rpx 10rpx 20rpx 20rpx;
	}
	.reg-right{
		color: #dd524d;
		margin-right: 10rpx;
		padding-left: 10rpx;
	}
	.z{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 30rpx;
		margin-top: 20rpx;
		height: 70rpx;
	}
	.zs{
		display: flex;
	}
	.z1{
		margin-bottom: 10rpx;
		margin-right: 300rpx;
		margin-top: 20rpx;
	}
	.z-h{
		height: 60rpx;
		margin-right: 10rpx;
		display: flex;
		flex-direction: row;
		font-size: 35rpx;
	}
	.z-z{
		font-size: 30rpx;
		color: #c8c7cc;
	}
	.z-z1{
		font-size: 30rpx;
		color: #c8c7cc;
		margin: 20rpx;
	}
	.z-z2{
		font-size: 30rpx;
		color: #c8c7cc;
		margin: 20rpx;
	}
	.y{
		margin: 0rpx;
		flex: 1;
	}
</style>
